<template>
  <div class="_wz_IdentificationDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="10%" />
        <col width="23%" />
        <col width="10%" />
        <col width="23%" />
        <col width="10%" />
        <col width="24%" />
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;text-align: center;" colspan="6">
          <span style="text-align: center;font-size: 24px!important;line-height: 50px!important;letter-spacing: 1px!important;font-weight: 900;position: relative;">
            {{ formData.dangerPositionName }}
          </span>
        </td>
      </tr>
      <tr>
        <td colspan="2" rowspan="4">
          <div class="demo-upload-list">
            <Image :src="!!formData.dangerPositionSiteImg ? apiUrl.imgUrl + formData.dangerPositionSiteImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.dangerPositionSiteImg ? apiUrl.imgUrl + formData.dangerPositionSiteImg : 'img/zwtpxd.png']" />
          </div>
        </td>
        <td class="_table_title">辨识计划</td>
        <td>{{ formData.dangerEstimateName }}</td>
        <td class="_table_title">计划状态</td>
        <td>
           <span v-if="formData.dangerEstimatePositionProcess == 0">
            <Tag color="#eee" type="dot" v-if="formData.dangerEstimatePositionProcess == 0">未派发</Tag>
          </span>
          <span v-if="formData.dangerEstimatePositionProcess == 1">
            <Tag color="error" type="dot" v-if="formData.dangerItemAnalyseState == -1">评价退回</Tag>
            <Tag color="warning" type="dot" v-else-if="formData.dangerItemIdentifyState == 1">等待辨识</Tag>
          </span>
          <span v-if="formData.dangerEstimatePositionProcess == 2">
            <Tag color="error" type="dot" v-if="formData.dangerItemAuditState == -1">审核退回</Tag>
            <Tag color="warning" type="dot" v-else-if="formData.dangerItemAnalyseState == 1">等待评价</Tag>
          </span>
          <span v-if="formData.dangerEstimatePositionProcess == 3">
            <Tag color="warning" type="dot" v-if="formData.dangerItemAuditState == -1">等待审核</Tag>
          </span>
          <Tag color="primary" type="dot" v-if="formData.dangerEstimatePositionFinish == 1">已完成</Tag>
        </td>
      </tr>
      <tr>
        <td class="_table_title">特种设备</td>
        <td>
          <Tag color="warning" type="dot" v-if="formData.dangerPositionDeviceState == 0">否</Tag>
          <Tag color="primary" type="dot" v-if="formData.dangerPositionDeviceState == 1">是</Tag>
        </td>
        <td class="_table_title">部位类型</td>
        <td>
          <Tag color="primary" type="dot" v-if="formData.dangerPositionType == 1">基础管理</Tag>
          <Tag color="warning" type="dot" v-if="formData.dangerPositionType == 2">设备设施</Tag>
          <Tag color="success" type="dot" v-if="formData.dangerPositionType == 3">作业活动</Tag>
        </td>
      </tr>

      <tr>
        <td class="_table_title">责任部门</td>
        <td>{{ formData.dangerPositionInOrgName }}</td>
        <td class="_table_title">责任人</td>
        <td>{{ formData.dangerPositionInUserName }}</td>
      </tr>

      <tr>

        <td class="_table_title">辨识人</td>
        <td>{{ formData.dangerItemIdentifyUserName }}</td>
        <td class="_table_title">辨识部门</td>
        <td>{{ formData.dangerItemIdentifyInOrgName }}</td>
      </tr>
      <tr>
        <td class="_table_title">时间范围</td>
        <td>{{ formData.dangerEstimateStartDate +' 至 '+formData.dangerEstimateEndDate }}</td>
        <td class="_table_title">辨识时间</td>
        <td>{{ formData.dangerItemIdentifyTime }}</td>
        <td class="_table_title">评价人员</td>
        <td>{{ formData.dangerItemAnalyseUserName ? formData.dangerItemAnalyseUserName : '--' }}</td>
      </tr>
      <tr>
        <td class="_table_title">经营企业</td>
        <td colspan="3">{{ formData.deptName }}</td>
        <td class="_table_title">经营类型</td>
        <td>{{ formData.deptTransportName }}</td>
      </tr>
      <template v-if="formData.dangerItemAnalyseReason">
        <tr>
          <td class="_table_title">评价描述</td>
          <td colspan="5">{{ formData.dangerPositionInOrgName }}</td>
        </tr>
      </template>
      <template v-if="formData.dangerItemAuditReason">
        <tr>
          <td class="_table_title">审核描述</td>
          <td colspan="5">{{ formData.dangerPositionInOrgName }}</td>
        </tr>
      </template>
      </tbody>
    </table>

    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="10%" />
        <col width="10%" />
        <col width="20%" />
        <col width="10%" />
        <col width="20%" />
        <col width="10%" />
        <col width="20%" />
      </colgroup>
      <tbody>

      <tr v-if="dataList.length > 0">
        <td style="font-weight: 600;position:relative;" colspan="7">风险辨识清单</td>
      </tr>
      <template v-for="(item,index) in dataList">
        <tr>
          <td rowspan="9">
            <Tag color="blue">第 {{ index + 1 }} 项</Tag>
          </td>
          <td class="_table_title">检查项目</td>
          <td>{{!!item.dangerPositionItemName ? item.dangerPositionItemName : "--" }}</td>
          <td class="_table_title">辨识人员</td>
          <td>{{ !!item.dangerPositionItemIdentifyUserName ? item.dangerPositionItemIdentifyUserName : "--"}}</td>
          <td class="_table_title">辨识时间</td>
          <td>{{ !!item.dangerPositionItemIdentifyTime ? item.dangerPositionItemIdentifyTime : "--" }}</td>
        </tr>
        <tr>
          <td class="_table_title">检查标准</td>
          <td colspan="3">{{!!item.dangerPositionItemCriterion  ? item.dangerPositionItemCriterion : "--" }}</td>

          <td colspan="2" rowspan="3">
            <div class="demo-upload-list">
              <Image :src="!!item.dangerPositionItemSiteImg ? apiUrl.imgUrl + item.dangerPositionItemSiteImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item.dangerPositionItemSiteImg ? apiUrl.imgUrl + item.dangerPositionItemSiteImg : 'img/zwtpxd.png']" />
            </div>
            <div class="_table_title">辨识图片</div>
          </td>
        </tr>
        <tr>
          <td class="_table_title">风险情况</td>
          <td colspan="3">{{!!item.dangerPositionItemBasis ? item.dangerPositionItemBasis : "--" }}</td>
        </tr>
        <tr>
          <td class="_table_title">主要后果</td>
          <td colspan="3">{{ !!item.dangerPositionItemNotCriterion ? item.dangerPositionItemNotCriterion : "--"}}</td>
        </tr>
        <tr>
          <td class="_table_title">影响因素</td>
          <td colspan="1">
            <Tag color="primary" type="dot" v-if="item.dangerPositionItemFactors == 1">人的因素</Tag>
            <Tag color="primary" type="dot" v-if="item.dangerPositionItemFactors == 2">物的因素</Tag>
            <Tag color="primary" type="dot" v-if="item.dangerPositionItemFactors == 3">环境因素</Tag>
            <Tag color="primary" type="dot" v-if="item.dangerPositionItemFactors == 4">管理因素</Tag>
          </td>
          <td class="_table_title">评定方法</td>
          <td colspan="1">
            <Tag color="success" type="dot" v-if="item.dangerPositionItemMethod == 1">LS评价法</Tag>
            <Tag color="success" type="dot" v-if="item.dangerPositionItemMethod == 2">LEC评价法</Tag>
            <Tag color="success" type="dot" v-if="item.dangerPositionItemMethod == 3">LC评价法</Tag>
            <Tag color="success" type="dot" v-if="item.dangerPositionItemMethod == 4">MES评价法</Tag>
            <Tag color="success" type="dot" v-if="item.dangerPositionItemMethod == 5">直接判断法</Tag>
          </td>
          <td class="_table_title">风险等级</td>
          <td colspan="1">
            <Tag color="error" type="dot" v-if="item.dangerPositionItemLevel == 1">重大风险</Tag>
            <Tag color="warning" type="dot" v-if="item.dangerPositionItemLevel == 2">较大风险</Tag>
            <Tag color="#eac434" type="dot" v-if="item.dangerPositionItemLevel == 3">一般风险</Tag>
            <Tag color="primary" type="dot" v-if="item.dangerPositionItemLevel == 4">低风险</Tag>
          </td>
        </tr>
        <tr>
          <td class="_table_title">管控措施</td>
          <td colspan="6">{{!!item.dangerPositionItemControl ? item.dangerPositionItemControl : "--" }}</td>
        </tr>
        <tr>
          <td class="_table_title">防护措施</td>
          <td colspan="6">{{!!item.dangerPositionItemProtect ? item.dangerPositionItemProtect : "--" }}</td>
        </tr>
        <tr>
          <td class="_table_title">应急措施</td>
          <td colspan="6">{{!!item.dangerPositionItemBurst ? item.dangerPositionItemBurst : "--" }}</td>
        </tr>
        <tr>
          <td class="_table_title">评价人员</td>
          <td>{{!!item.dangerPositionItemAnalyseUserName ? item.dangerPositionItemIdentifyUserName : "--" }}</td>
          <td class="_table_title">评价时间</td>
          <td>{{!!item.dangerPositionItemAnalyseTime ? item.dangerPositionItemIdentifyTime : "--" }}</td>
          <td class="_table_title">签字</td>
          <td></td>
        </tr>
      </template>

      </tbody>
    </table>
  </div>
</template>
<script>




import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'IdentificationDetails',//组件名称
  components: {},//组件引用
  props: ["selectData"], //接收来自父组件的数据
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      dataList:[],
      formData:{},
    })

    const loadData = ()=>{
      state.formData = JSON.parse(JSON.stringify(props.selectData))

      $axios.post(apiUrl.dangerEstimateDangerEstimatePositionItemList,{dangerEstimatePositionUuid : props.selectData.uuid }).then((res) => {
        if(!!res.data){
          state.dataList = res.data.data;
        }
      }).catch((err) => {
        console.log("失败", err)
      })
    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
    }
  }
})

</script>
<style lang="less">
._wz_IdentificationDetails {
  table {
    border-top: 1px solid #515a6e;
    border-left: 1px solid #515a6e;
    width: 100%;

    ._table_title{
      //font-weight: 900;
      text-align: center;
    }

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border-right: 1px solid #515a6e;
      border-bottom: 1px solid #515a6e;
      padding-left: 18px;
      padding-right: 18px;
      word-break: break-all;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 200px;
    height: 140px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;

    img {
      min-height: 10%;
      max-height: 90%;
      min-width: 10%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}
</style>
